<template>
	<view class="box-main">


		<view class="mb-50">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">姓名</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="width: 70%;">
					<input :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" type="text" v-model="form.name" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>

		<view class="mb-30">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">联系方式</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="width: 70%;">
					<input type="number" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" maxlength="11" v-model="form.phone" placeholder="请输入联系方式" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>

		<view class="mb-10">
			<view class=" ">
				<view>
					<text class=" c-999 fs-34">服务类型</text>
					<text class="must ml-10">*</text>
				</view>
			</view>
			<view class="mt-20 flex ww" style="gap: 20rpx;">
				<view @click="selectType(item)" v-for="(item,index) in serviceType" :key="index" class="box-card-item"
					:class="{'box-card-item-actice':currnetList.includes(item.title)}">
					{{item.title || ''}}
				</view>
			</view>
			<view class="mt-10 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>

		<view class="mb-50">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">公司名称</text>
				</view>
				<view style="width: 70%;">
					<input :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" type="text" v-model="form.companyName" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>


		<view>
			<view>
				<view>
					<text class="c-999 fs-34">备注</text>
				</view>
				<view style="height: 24vh;" class="mt-20">
					<textarea maxlength="200" style="width: 100%;height: 26vh;" v-model="form.desc"
						placeholder="请输入备注" />
				</view>
				<view class="wfc mla">
					<text>{{form.desc.length || 0}}/200</text>
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>


		<!-- 页脚 -->
		<view class="box-footer shadow-2">
			<view @click="submit" class="box-f-btn mt-5">
				立即申请
			</view>
		</view>
		<!-- end -->

	</view>
</template>

<script>
	import {
		serviceApply
	} from "@/api/extend.js"
	export default {
		data() {
			return {
				options: {},
				currnetList: [], // 当前选择的服务类型
				form: {
					companyName: '',
					name: '',
					phone: '',
					desc: ''
				}
			}
		},
		computed: {
			serviceType() {
				return this.$store.state.extend.serviceType;
			}
		},
		onLoad(options) {
			this.options = options;
			if (Array.isArray(this.serviceType) && this.serviceType.length > 0) {
				let title = this.serviceType[options['_index']]['title'];
				this.currnetList.push(title)
			}
		},
		methods: {
			submit() {
				if (this.form.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					})
					return
				}
				if (this.currnetList.length == 0) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none'
					})
					return
				}

				serviceApply({
					service: this.currnetList.join(','),
					name: this.form.name,
					phone: this.form.phone,
					company_name: this.form.company_name,
					remark: this.form.desc,
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					setTimeout(() =>{
						uni.navigateBack();
					},2000)
				})

			},
			selectType(item) {
				console.log(item);
				if (this.currnetList.includes(item.title)) {
					let _index = this.currnetList.findIndex(obj => obj == item.title);
					this.currnetList.splice(_index, 1);
				} else {
					this.currnetList.push(item.title);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-card-item {
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: fit-content;
		height: 60rpx;
		border: 1px solid #E0E0E0;
		text-align: center;
		line-height: 60rpx;
		border-radius: 6rpx;
	}

	.box-card-item-actice {
		background-color: rgba(0, 102, 255, 0.15);
		color: #0066FF;
		border: 1px solid #0066FF;
	}

	.must {
		color: red;
		font-weight: bold;
	}

	.box-f-btn {
		font-size: 32rpx;
		border-radius: 8rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		width: 100%;
		background-color: #0066FF;
	}

	.box-f-btn:active {
		opacity: .5;
	}

	.box-footer {
		padding: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		color: white;
		background-color: white;
		width: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); ///兼容 IOS<11.2/
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); ///兼容 IOS>11.2/
		height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.box-main {
		background-color: white;
		padding: 30rpx;
	}
</style>